<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="nav-title">个人信息</text>
			<view class="nav-right">
				<text class="nav-right-text" @click="logout">退出登录</text>
			</view>
		</view>

		<!-- 个人信息展示区域 -->
		<view class="user-info">
			<view class="user-info-item">
				<text class="label">姓名：</text>
				<view class="value">{{ userInfo.name || '未设置' }}</view>
			</view>
			<view class="user-info-item">
				<text class="label">职位：</text>
				<view class="value">{{ userInfo.roleName || '未设置' }}</view>
			</view>
			<view class="user-info-item">
				<text class="label">联系方式：</text>
				<view class="value">{{ userInfo.phoneNumber || '未绑定' }}</view>
			</view>
			<view class="user-info-item">
				<text class="label">邮箱：</text>
				<view class="value">{{ userInfo.email || '未绑定' }}</view>
			</view>
		</view>

		<!-- 编辑按钮 -->
		<view class="edit-button">
			<button @click="editUserInfo">编辑</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {} // 存储用户信息
			};
		},
		mounted() {
			this.getUserInfo();
		},
		methods: {
			// 退出登录
			logout() {
				uni.showModal({
					title: "提示",
					content: "确定要退出登录吗？",
					success: (res) => {
						if (res.confirm) {
							console.log("用户点击了“确定”按钮");
							// 清除本地存储并返回到登录页面
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: '/pages/login/login'
							});
						} else {
							console.log("用户点击了“取消”按钮");
						}
					}
				});
			},
			// 获取用户信息
			async getUserInfo() {
				try {
					const token = uni.getStorageSync('token'); // 从本地存储中获取 Token
					if (!token) {
						uni.showToast({
							title: "请先登录",
							icon: 'none'
						});
						return;
					}

					const res = await uni.request({
						url: "http://localhost:8082/user/profile",
						method: 'get',
						header: {
							'Authorization': 'Bearer ' + token // 使用 Token
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.userInfo = res.data.data; // 假设后端返回的数据结构为 { code: 1, data: {...} }
						console.log(res.data);
					} else {
						console.log(res.data);
						uni.showToast({
							title: "获取用户信息失败",
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			},
			// 编辑用户信息
			// mine.vue methods 中的 editUserInfo 方法改成：
			editUserInfo() {
				uni.navigateTo({
					url: `/pages/user/editUserInfo/editUserInfo?phoneNumber=${this.userInfo.phoneNumber || ''}&email=${this.userInfo.email || ''}`
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f0f4f8;
		padding: 20px;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(45deg, #007aff, #005bb5);
		padding: 14px;
		color: white;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.nav-title {
		font-size: 20px;
		font-weight: bold;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.nav-right-text {
		color: white;
		font-size: 16px;
		margin-left: 12px;
		cursor: pointer;
	}

	.nav-right-text:hover {
		opacity: 0.7;
	}

	.user-info {
		background-color: white;
		padding: 20px;
		border-radius: 12px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
		margin-top: 20px;
	}

	.user-info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}

	.label {
		font-weight: bold;
		color: #007aff;
		font-size: 16px;
	}

	.value {
		flex: 1;
		color: #555;
		font-size: 16px;
		text-align: right;
		font-style: italic;
	}

	.edit-button {
		margin-top: 30px;
	}

	.edit-button button {
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 8px;
		padding: 12px;
		width: 100%;
		font-size: 18px;
		transition: background-color 0.3s ease, opacity 0.3s ease;
	}

	.edit-button button:hover {
		opacity: 0.8;
		background-color: #005bb5;
	}
</style>